<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web前端播放器设计</title>
    <link rel="stylesheet" href="fonts/font-awesome.css">
    <link rel="stylesheet" href="css/video.css">
</head>

<body>
    <figcaption>视频播放器 <br>
        <p class="author">Cen Qi Ming date:2023-12-01</p>
    </figcaption>
    <div class="player">
        <video src="./video/fun.ogv"></video>
        <!-- 控件设置 -->
        <div class="controls">
            <!-- 播放/暂停 -->
            <a href="javascript:;" class="switch fa fa-play"></a>
            <!-- 播放进度 -->
            <div class="progress">
                <div class="line"></div>
                <div class="bar"></div>
            </div>
            <!-- 当前播放时间/播放总时长 -->
            <div class="timer">
                <span class="current">00:00:00</span> / <span class="total">00:00:00</span>
            </div>
            <!-- 全屏/取消全屏 -->
            <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/video.js"></script>
</body>

</html>